<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>生活工具 - 便捷工具合集</title>
        <link rel="icon" href="faviconlogo.ico">

        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
        />
        <link rel="stylesheet" href="css/styles.css" />
        <link rel="stylesheet" href="css/life-tools.css" />
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.12/css/weather-icons.min.css"
        />
    </head>
    <body>
       <!-- 导航栏代码 -->
<nav class="navbar">
    <div class="logo no-wrap">
        <i class="fas fa-toolbox"></i>
        <span>便捷工具合集</span>
    </div>
    <div class="nav-container">
        <ul class="nav-links">
            <li><a href="index.html" class="nav-item no-wrap">首页</a></li>
            <li><a href="calculator.html" class="nav-item no-wrap">计算工具</a></li>
            <li><a href="image-processing.html" class="nav-item no-wrap">图像处理</a></li>
            <li><a href="dev-tools.html" class="nav-item no-wrap">开发工具</a></li>
            <li><a href="life-tools.html" class="nav-item no-wrap">生活工具</a></li>
            <li><a href="404.html" class="nav-item no-wrap">API工具</a></li>
        </ul>
        <div class="nav-actions">
            <button id="sidebarToggle" class="btn mobile-menu-btn">
                <i class="fas fa-bars no-wrap"></i>
            </button>
            <li id="userInfo" style="display: none">
                <span class="username"></span>
                <button onclick="logout()" class="btn logout-btn">
                    <i class="fas fa-sign-out-alt"></i>
                </button>
            </li>
            <li id="login">
                <a href="login.html" class="nav-item active no-wrap login-link"
                    ><i class="fas fa-sign-in-alt"></i>登录</a
                >
            </li>
        </div>
    </div>
</nav>
       
            <!-- 天气预报工具 -->
            <div class="section">
                <h2 class="section-title">
                    <i class="wi wi-day-sunny"></i> 天气预报
                </h2>
                <div class="weather-tool">
                    <div class="weather-search">
                        <input
                            type="text"
                            id="cityInput"
                            class="form-control"
                            placeholder="输入城市名称"
                        />
                        <button id="getWeather" class="btn btn-primary">
                            <i class="fas fa-search"></i> 查询
                        </button>
                        <button id="getLocation" class="btn">
                            <i class="fas fa-location-arrow"></i> 定位
                        </button>
                    </div>

                    <div class="weather-result" id="weatherResult">
                        <div class="current-weather">
                            <div class="weather-main">
                                <div class="weather-icon">
                                    <i
                                        class="wi wi-day-sunny"
                                        id="weatherIcon"
                                    ></i>
                                </div>
                                <div class="weather-temp">
                                    <span id="temperature">--</span>°C
                                </div>
                                <div class="weather-desc" id="weatherDesc">
                                    --
                                </div>
                                <div class="weather-city" id="cityName">--</div>
                            </div>
                            <div class="weather-details">
                                <div class="detail-item">
                                    <i class="wi wi-humidity"></i>
                                    <span>湿度</span>
                                    <strong id="humidity">--%</strong>
                                </div>
                                <div class="detail-item">
                                    <i class="wi wi-strong-wind"></i>
                                    <span>风速</span>
                                    <strong id="windSpeed">-- km/h</strong>
                                </div>
                                <div class="detail-item">
                                    <i class="wi wi-sunrise"></i>
                                    <span>日出</span>
                                    <strong id="sunrise">--:--</strong>
                                </div>
                                <div class="detail-item">
                                    <i class="wi wi-sunset"></i>
                                    <span>日落</span>
                                    <strong id="sunset">--:--</strong>
                                </div>
                            </div>
                        </div>

                        <div class="forecast" id="weatherForecast">
                            <div class="forecast-item">
                                <div class="forecast-day">今天</div>
                                <i class="wi wi-day-sunny"></i>
                                <div class="forecast-temp">--° / --°</div>
                            </div>
                            <!-- 其他预报项将通过JS动态生成 -->
                        </div>
                    </div>
                </div>
            </div>

            <!-- BMI计算器 -->
            <div class="section">
                <h2 class="section-title">
                    <i class="fas fa-weight"></i> BMI计算器
                </h2>
                <div class="bmi-calculator">
                    <div class="calculator-form">
                        <div class="form-group">
                            <label for="height">身高 (cm)</label>
                            <input
                                type="number"
                                id="height"
                                class="form-control"
                                placeholder="输入身高"
                                min="100"
                                max="250"
                            />
                        </div>
                        <div class="form-group">
                            <label for="weight">体重 (kg)</label>
                            <input
                                type="number"
                                id="weight"
                                class="form-control"
                                placeholder="输入体重"
                                min="30"
                                max="200"
                            />
                        </div>
                        <button id="calculateBmi" class="btn btn-primary">
                            计算BMI
                        </button>
                        <button id="resetBmi" class="btn">重置</button>
                    </div>

                    <div class="calculator-result" id="bmiResult">
                        <div class="result-card">
                            <h3>您的BMI值</h3>
                            <div class="bmi-value" id="bmiValue">--</div>
                            <div class="bmi-category" id="bmiCategory">
                                请先输入身高体重
                            </div>
                        </div>
                        <div class="bmi-chart">
                            <div
                                class="chart-bar underweight"
                                data-category="偏瘦"
                            >
                                <span>&lt; 18.5</span>
                            </div>
                            <div class="chart-bar normal" data-category="正常">
                                <span>18.5 - 24.9</span>
                            </div>
                            <div
                                class="chart-bar overweight"
                                data-category="过重"
                            >
                                <span>25 - 29.9</span>
                            </div>
                            <div class="chart-bar obese" data-category="肥胖">
                                <span>≥ 30</span>
                            </div>
                            <div
                                class="chart-indicator"
                                id="bmiIndicator"
                            ></div>
                        </div>
                        <div class="bmi-tips" id="bmiTips">
                            <h4><i class="fas fa-lightbulb"></i> 健康建议</h4>
                            <p>请先计算您的BMI值以获取个性化建议</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 单位换算器 -->
            <div class="section">
                <h2 class="section-title">
                    <i class="fas fa-exchange-alt"></i> 单位换算器
                </h2>
                <div class="converter-tool">
                    <div class="converter-tabs">
                        <button class="converter-tab active" data-type="length">
                            长度
                        </button>
                        <button class="converter-tab" data-type="weight">
                            重量
                        </button>
                        <button class="converter-tab" data-type="volume">
                            体积
                        </button>
                        <button class="converter-tab" data-type="temperature">
                            温度
                        </button>
                    </div>

                    <div class="converter-content">
                        <!-- 长度换算 -->
                        <div class="converter-pane active" id="lengthPane">
                            <div class="converter-group">
                                <input
                                    type="number"
                                    id="lengthValue"
                                    class="form-control"
                                    value="1"
                                />
                                <select id="lengthFrom" class="form-control">
                                    <option value="meter">米 (m)</option>
                                    <option value="kilometer">千米 (km)</option>
                                    <option value="centimeter">
                                        厘米 (cm)
                                    </option>
                                    <option value="millimeter">
                                        毫米 (mm)
                                    </option>
                                    <option value="inch">英寸 (in)</option>
                                    <option value="foot">英尺 (ft)</option>
                                    <option value="yard">码 (yd)</option>
                                    <option value="mile">英里 (mi)</option>
                                </select>
                            </div>
                            <div class="converter-arrow">
                                <i class="fas fa-exchange-alt"></i>
                            </div>
                            <div class="converter-group">
                                <input
                                    type="number"
                                    id="lengthResult"
                                    class="form-control"
                                    readonly
                                />
                                <select id="lengthTo" class="form-control">
                                    <option value="centimeter">
                                        厘米 (cm)
                                    </option>
                                    <option value="meter">米 (m)</option>
                                    <option value="kilometer">千米 (km)</option>
                                    <option value="inch">英寸 (in)</option>
                                    <option value="foot">英尺 (ft)</option>
                                    <option value="yard">码 (yd)</option>
                                    <option value="mile">英里 (mi)</option>
                                </select>
                            </div>
                        </div>

                        <!-- 重量换算 -->
                        <div class="converter-pane" id="weightPane">
                            <div class="converter-group">
                                <input
                                    type="number"
                                    id="weightValue"
                                    class="form-control"
                                    value="1"
                                />
                                <select id="weightFrom" class="form-control">
                                    <option value="gram">克 (g)</option>
                                    <option value="kilogram">千克 (kg)</option>
                                    <option value="milligram">毫克 (mg)</option>
                                    <option value="pound">磅 (lb)</option>
                                    <option value="ounce">盎司 (oz)</option>
                                </select>
                            </div>
                            <div class="converter-arrow">
                                <i class="fas fa-exchange-alt"></i>
                            </div>
                            <div class="converter-group">
                                <input
                                    type="number"
                                    id="weightResult"
                                    class="form-control"
                                    readonly
                                />
                                <select id="weightTo" class="form-control">
                                    <option value="kilogram">千克 (kg)</option>
                                    <option value="gram">克 (g)</option>
                                    <option value="pound">磅 (lb)</option>
                                    <option value="ounce">盎司 (oz)</option>
                                </select>
                            </div>
                        </div>

                        <!-- 体积换算 -->
                        <div class="converter-pane" id="volumePane">
                            <div class="converter-group">
                                <input
                                    type="number"
                                    id="volumeValue"
                                    class="form-control"
                                    value="1"
                                />
                                <select id="volumeFrom" class="form-control">
                                    <option value="liter">升 (L)</option>
                                    <option value="milliliter">
                                        毫升 (mL)
                                    </option>
                                    <option value="gallon">加仑 (gal)</option>
                                    <option value="quart">夸脱 (qt)</option>
                                    <option value="pint">品脱 (pt)</option>
                                    <option value="cup">杯 (cup)</option>
                                    <option value="tablespoon">
                                        汤匙 (tbsp)
                                    </option>
                                    <option value="teaspoon">茶匙 (tsp)</option>
                                </select>
                            </div>
                            <div class="converter-arrow">
                                <i class="fas fa-exchange-alt"></i>
                            </div>
                            <div class="converter-group">
                                <input
                                    type="number"
                                    id="volumeResult"
                                    class="form-control"
                                    readonly
                                />
                                <select id="volumeTo" class="form-control">
                                    <option value="milliliter">
                                        毫升 (mL)
                                    </option>
                                    <option value="liter">升 (L)</option>
                                    <option value="gallon">加仑 (gal)</option>
                                    <option value="cup">杯 (cup)</option>
                                    <option value="tablespoon">
                                        汤匙 (tbsp)
                                    </option>
                                </select>
                            </div>
                        </div>

                        <!-- 温度换算 -->
                        <div class="converter-pane" id="temperaturePane">
                            <div class="converter-group">
                                <input
                                    type="number"
                                    id="tempValue"
                                    class="form-control"
                                    value="0"
                                />
                                <select id="tempFrom" class="form-control">
                                    <option value="celsius">摄氏度 (°C)</option>
                                    <option value="fahrenheit">
                                        华氏度 (°F)
                                    </option>
                                    <option value="kelvin">开尔文 (K)</option>
                                </select>
                            </div>
                            <div class="converter-arrow">
                                <i class="fas fa-exchange-alt"></i>
                            </div>
                            <div class="converter-group">
                                <input
                                    type="number"
                                    id="tempResult"
                                    class="form-control"
                                    readonly
                                />
                                <select id="tempTo" class="form-control">
                                    <option value="fahrenheit">
                                        华氏度 (°F)
                                    </option>
                                    <option value="celsius">摄氏度 (°C)</option>
                                    <option value="kelvin">开尔文 (K)</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 时间管理工具 -->
            <div class="section">
                <h2 class="section-title">
                    <i class="fas fa-clock"></i> 时间管理
                </h2>
                <div class="time-management">
                    <div class="time-tabs">
                        <button class="time-tab active" data-tool="pomodoro">
                            番茄钟
                        </button>
                        <button class="time-tab" data-tool="stopwatch">
                            秒表
                        </button>
                        <button class="time-tab" data-tool="countdown">
                            倒计时
                        </button>
                    </div>

                    <div class="time-content">
                        <!-- 番茄钟 -->
                        <div class="time-pane active" id="pomodoroPane">
                            <div class="pomodoro-display">
                                <div class="time" id="pomodoroTime">25:00</div>
                                <div class="pomodoro-controls">
                                    <button
                                        id="pomodoroStart"
                                        class="btn btn-primary"
                                    >
                                        <i class="fas fa-play"></i> 开始
                                    </button>
                                    <button
                                        id="pomodoroPause"
                                        class="btn"
                                        disabled
                                    >
                                        <i class="fas fa-pause"></i> 暂停
                                    </button>
                                    <button id="pomodoroReset" class="btn">
                                        <i class="fas fa-redo"></i> 重置
                                    </button>
                                </div>
                            </div>
                            <div class="pomodoro-settings">
                                <div class="setting-group">
                                    <label for="workDuration"
                                        >工作时间 (分钟)</label
                                    >
                                    <input
                                        type="number"
                                        id="workDuration"
                                        min="1"
                                        max="60"
                                        value="25"
                                    />
                                </div>
                                <div class="setting-group">
                                    <label for="breakDuration"
                                        >休息时间 (分钟)</label
                                    >
                                    <input
                                        type="number"
                                        id="breakDuration"
                                        min="1"
                                        max="30"
                                        value="5"
                                    />
                                </div>
                            </div>
                            <div class="pomodoro-status">
                                <div id="pomodoroPhase">准备开始工作</div>
                                <div class="pomodoro-cycles">
                                    <span>已完成番茄钟: </span>
                                    <span id="completedPomodoros">0</span>
                                </div>
                            </div>
                        </div>

                        <!-- 秒表 -->
                        <div class="time-pane" id="stopwatchPane">
                            <div class="stopwatch-display">
                                <div class="time" id="stopwatchTime">
                                    00:00:00
                                </div>
                                <div class="stopwatch-controls">
                                    <button
                                        id="stopwatchStart"
                                        class="btn btn-primary"
                                    >
                                        <i class="fas fa-play"></i> 开始
                                    </button>
                                    <button
                                        id="stopwatchPause"
                                        class="btn"
                                        disabled
                                    >
                                        <i class="fas fa-pause"></i> 暂停
                                    </button>
                                    <button id="stopwatchReset" class="btn">
                                        <i class="fas fa-redo"></i> 重置
                                    </button>
                                    <button id="stopwatchLap" class="btn">
                                        <i class="fas fa-flag"></i> 计次
                                    </button>
                                </div>
                            </div>
                            <div class="stopwatch-laps" id="stopwatchLaps">
                                <div class="laps-header">
                                    <span>计次</span>
                                    <span>时间</span>
                                </div>
                                <!-- 计次记录将在这里显示 -->
                            </div>
                        </div>

                        <!-- 倒计时 -->
                        <div class="time-pane" id="countdownPane">
                            <div class="countdown-display">
                                <div class="time" id="countdownTime">
                                    00:00:00
                                </div>
                                <div class="countdown-controls">
                                    <button
                                        id="countdownStart"
                                        class="btn btn-primary"
                                    >
                                        <i class="fas fa-play"></i> 开始
                                    </button>
                                    <button
                                        id="countdownPause"
                                        class="btn"
                                        disabled
                                    >
                                        <i class="fas fa-pause"></i> 暂停
                                    </button>
                                    <button id="countdownReset" class="btn">
                                        <i class="fas fa-redo"></i> 重置
                                    </button>
                                </div>
                            </div>
                            <div class="countdown-settings">
                                <div class="time-inputs">
                                    <input
                                        type="number"
                                        id="countdownHours"
                                        min="0"
                                        max="23"
                                        value="0"
                                        placeholder="时"
                                    />
                                    <span>:</span>
                                    <input
                                        type="number"
                                        id="countdownMinutes"
                                        min="0"
                                        max="59"
                                        value="0"
                                        placeholder="分"
                                    />
                                    <span>:</span>
                                    <input
                                        type="number"
                                        id="countdownSeconds"
                                        min="0"
                                        max="59"
                                        value="0"
                                        placeholder="秒"
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 页脚 -->
      <footer>
    <div class="footer-content">
        <div class="footer-column">
            <h3>在线工具合集</h3>
            <p>提供全面实用的在线工具，助力高效完成各类任务。</p>
            <div class="social-links" style="display: flex; gap: 1rem; margin-top: 1rem">
                <a href="#" style="color: white"><i class="fab fa-facebook fa-lg"></i></a>
                <a href="#" style="color: white"><i class="fab fa-twitter fa-lg"></i></a>
                <a href="#" style="color: white"><i class="fab fa-instagram fa-lg"></i></a>
                <a href="#" style="color: white"><i class="fab fa-github fa-lg"></i></a>
            </div>
        </div>

        <div class="footer-column">
            <h3>工具分类</h3>
            <ul class="footer-links">
                <li><a href="calculator.html"><i class="fas fa-calculator"></i> 计算工具</a></li>
                <li><a href="image-processing.html"><i class="fas fa-image"></i> 图像处理</a></li>
                <li><a href="dev-tools.html"><i class="fas fa-code"></i> 开发工具</a></li>
                <li><a href="life-tools.html"><i class="fas fa-clock"></i> 生活工具</a></li>
                <li><a href="edu-tools.html"><i class="fas fa-book"></i> 教育工具</a></li>
            </ul>
        </div>

        <div class="footer-column">
            <h3>帮助中心</h3>
            <ul class="footer-links">
                <li><a href="#" ><i class="fas fa-question-circle"></i> 常见问题</a></li>
                <li><a href="#" ><i class="fas fa-play-circle"></i> 使用教程</a></li>
                <li><a href="#" ><i class="fas fa-comment"></i> 意见反馈</a></li>
            </ul>
        </div>

        <div class="footer-column">
            <h3>订阅更新</h3>
            <p>获取最新工具和功能更新</p>
            <div class="subscribe-form">
                <div class="input-group">
                    <input type="email" placeholder="您的邮箱" class="form-control" />
                    <button class="btn btn-primary">订阅</button>
                </div>
            </div>
        </div>
    </div>

    <div class="copyright">
        <p>&copy; 2025 在线工具合集 - 个人开发者保留所有权利</p>
    </div>
</footer>

        <!-- 引入必要的JS库 -->
        <script src="js/life-tools.js"></script>
        <script src="js/common.js"></script>
        <script src="js/left.js"></script>
    </body>
</html>
